<template>
    
    <div class="f-c-c vh100vh login">
        <div class="container"> 
             <div class="logo " ><img src="../assets/imgs/logo.png" alt="" class="imgs"><span class="title">赤兔养车</span></div>
            <div class="notice">账号密码登录</div>
        <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item  prop="account">
        <template #label>
           <div style="color: #151414;">账户名</div>
        </template>

      <el-input v-model="ruleForm.username" />
    </el-form-item>
    <el-form-item prop="password">
        <template #label>
           <div style="color: #090909;">密码</div>
        </template>
      <el-input v-model="ruleForm.password" />
    </el-form-item>
    
    <el-form-item>
      <el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)" style="width:100%">
        登录
      </el-button>
     
    </el-form-item>
  </el-form>
</div>
    </div>

</template>
    
<script setup lang='ts'>
import { reactive, ref ,} from 'vue'

import { FormInstance, FormRules,ElMessage } from 'element-plus'
import {useRouter} from 'vue-router';
import { loginApi } from '../apis/user';


const router=useRouter();
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    username:"",
    password:""
})
const loading=ref(false)

const rules = reactive<FormRules>({
    username: [
    { required: true, message: '请输入正确的名字', trigger: 'blur' },
    { min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入正确的密码', trigger: 'blur' },
    { min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur' },
  ],
  
})

const submitForm = async (formEl: FormInstance | undefined) => {

        loading.value=true
  if (!formEl) return
  await formEl.validate((valid:any, fields:any) => {
    if (valid) {
      console.log('submit!', ruleForm)
      loginApi({username:ruleForm.username,password:ruleForm.password})
      .then(data=>{
        console.log("data数据",data.data)
        if(data.message=="认证成功"){
          loading.value=false
            const {config,exipreTime,permissions,roles,token,user}=data.data
                localStorage.config=JSON.stringify(config);
                localStorage.exipreTime=exipreTime;
                localStorage.permissions=JSON.stringify(permissions);
                localStorage.roles=JSON.stringify(roles);
                localStorage.token=token;
                localStorage.user=JSON.stringify(user);

                ElMessage.success('登录成功')
                router.push('/nav')

        }
      })
      .catch(data=>{
        loading.value=false
        console.log("err",data);
        
      })
    } else {
      loading.value=false
      ElMessage.error('账号密码有误')
    }
  })
}




</script>
    
<style  scoped lang="scss">
        .logo{
            width: 100%;
           text-align: center;
        }
        .imgs{
            width: 40px;
            height: 19px;
        }
        .title{
            font-size: 28px;
            margin-left: 15px;
            font-weight: bolder;
            
        }
        .notice{
            width: 100%;
            text-align: center;
            margin: 30px 20px 20px 20px;
            color: rgb(93, 93, 228);
        }
        .container{
            width: 500px;
        }
</style>